<template>
	<view>
		<swiper class="card-swiper" circular="true"
		 autoplay="true" interval="5000" duration="500" @change="cardSwiper">
			<swiper-item class="swiper-item" v-for="(item,index) in itemData" :key="index" :class="cardCur==index?'cur':''">
			  <view class="item"> 
				<image class="item-image" :src="item.imgUrl" mode="aspectFill" @top="navigationTo"  :data-url="item.linkUrl"></image>
			  </view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default { 
		  /**
		   * 组件的属性列表
		   * 用于组件自定义设置
		   */
		props: {
			temIndex: {},
			itemStyle: {},
			params: {},
			itemData: {}
		},
		data() {
			return {
				cardCur: 0,
			}
		},
		methods: {
			cardSwiper(e) {
				this.setData({
					cardCur: e.detail.current
				})
			},

			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(e) {
				console.log(e);
				this.navigationTo(e.currentTarget.dataset.url);
			},
		}
	}
</script>

<style >
	/* ==================
	         轮播
	 ==================== */

	.card-swiper {
		height: 350rpx !important;
	}

	.item .item-image {
		width: 100%;
		display: block;
		height: 100%;
		margin: 0;
		pointer-events: none;
	}

	.card-swiper swiper-item {
		width: 610rpx !important;
		left: 70rpx;
		box-sizing: border-box;
		padding: 15upx 0upx 0upx;
		overflow: initial;
	}

	.card-swiper swiper-item .item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
</style>
